<script setup lang="ts">
import { h } from 'vue';

import {
  DownOutlined,
  MinusOutlined,
  PlusOutlined,
} from '@ant-design/icons-vue';
import { Modal } from 'ant-design-vue';
import { storeToRefs } from 'pinia';

import { errimage } from '#/base';
import { link1688stor } from '#/store';

const link1688 = link1688stor();
const { bindSkuList, bindGoodsList } = storeToRefs(link1688) as any;
const { infoitemskuitem } = link1688 as any;

const columns = [
  {
    title: '序号',
    dataIndex: 'index',
    key: 'index',
    width: 60,
    fixed: 'left',
    align: 'center',
  },
  {
    title: '店铺sku',
    dataIndex: 'shopSku',
    key: 'shopSku',
    width: 200,
  },
  {
    title: '店铺售价',
    dataIndex: 'price',
    key: 'price',
    width: 90,
    align: 'center',
  },
  {
    title: '预估采购价',
    dataIndex: 'epPrice',
    key: 'epPrice',
    width: 90,
    align: 'center',
  },
  {
    title: '关联货源',
    dataIndex: 'asGoods',
    key: 'asGoods',
    width: 600,
  },
  // {
  //   title: '相识度  采购规格',
  //   dataIndex: 'buySku',
  //   key: 'buySku',
  // },
  // {
  //   title: '采购件数',
  //   dataIndex: 'buyNum',
  //   key: 'buyNum',
  // },
  // {
  //   title: '添加规格',
  //   dataIndex: 'addSku',
  //   key: 'addSku',
  // },
];
// const data = reactive([
//   {
//     index: 'kubox',
//     huoyuanlist: [
//       {
//         asGoods: '1',
//       },
//       {
//         asGoods: '2',
//       },
//     ],
//   },
// ]);
const showMoberal = (item: any) => {
  // showLinkSkuStatus.value = true;
  link1688.getItemInSkuList(item);
};

const addSku = (item: any) => {
  link1688.pushItem1688SkuItemFu(item);
  link1688.setnums();
};
const removeSku = (item: any, index: any) => {
  item.bindSkuList.splice(index, 1);
  if (!item.bindSkuList || item.bindSkuList.length === 0) {
    addSku(item);
  }
  link1688.setnums();
};
function calculatePrice(params: any) {
  let yuguPrice = 0;
  params.bindSkuList.forEach((item: any) => {
    if (item.priceStr) {
      yuguPrice += Number((item.priceStr * item.buyNum).toFixed(2));
    }
  });
  return `¥${yuguPrice}`;
}
function handleMenuClick(params: any) {
  // console.log(params.key, bindGoodsList);
  // let useIndex = 0;
  const getFindContent = bindGoodsList.value.find((item: any) => {
    return item.offerId === params.key; // && (useIndex = index + 1);
  });
  // console.log('getFindContent', getFindContent, useIndex);
  Modal.confirm({
    title: '关联货源',
    content: `确定批量关联货源${getFindContent?.index}`,
    okText: '批量关联',
    cancelText: '取消',
    onOk() {
      // link1688.pushItem1688SkuItemFu(getFindContent);
      bindSkuList.value.forEach((item: any) => {
        item.bindSkuList.forEach((itt: any) => {
          if (itt.offerId !== params.key) {
            for (const key in itt) {
              itt[key] = infoitemskuitem[key];
            }
            itt.offerId = params.key;
          }
        });
      });
    },
  });
}
</script>

<template>
  <div class="mt-6">
    <a-table
      :columns="columns"
      :data-source="bindSkuList"
      :pagination="false"
      :scroll="{ x: `max-content`, y: 300 }"
      bordered
      size="small"
    >
      <template #headerCell="{ column }">
        <template v-if="column.dataIndex === 'asGoods'">
          <a-space>
            <a-dropdown>
              <a class="ant-dropdown-link" @click.prevent>
                关联货源
                <DownOutlined />
              </a>
              <template #overlay>
                <a-menu @click="handleMenuClick">
                  <a-menu-item
                    v-for="item in bindGoodsList"
                    :key="item.offerId"
                  >
                    <a href="javascript:;">货源:{{ item.index }}</a>
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
            <div class="ml-12 mr-56">相识度 采购规格</div>
            <div>采购件数</div>
            <div class="ml-12">添加规格</div>
          </a-space>
        </template>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'shopSku'">
          <a-space>
            <a-image
              :fallback="errimage"
              :src="record.goodsSku.specPic || 'err'"
              :width="30"
              class="rounded-sm"
            />
            <a-tooltip :title="record.skuValue">
              <div class="w-48 truncate">
                {{ record.skuValue }}
              </div>
            </a-tooltip>
          </a-space>
        </template>
        <template v-if="column.dataIndex === 'epPrice'">
          {{ calculatePrice(record) }}
        </template>
        <template v-if="column.dataIndex === 'asGoods'">
          <a-space direction="vertical">
            <div v-for="(item, index) in record.bindSkuList" :key="item.id">
              <a-space>
                <a-select
                  v-model:value="item.offerId"
                  placeholder="货源"
                  style="width: 120px"
                >
                  <a-select-option
                    v-for="items in bindGoodsList"
                    :key="items.offerId"
                    :value="items.offerId"
                  >
                    货源:{{ items.index }}
                  </a-select-option>
                </a-select>
                <a-space>
                  <a-space direction="vertical">
                    <!-- <div>相似度</div> -->
                    <a-progress
                      :format="(percent: number) => `${percent}%`"
                      :percent="Number((item.xiangshidu * 100).toFixed())"
                      :size="40"
                      type="circle"
                    />
                  </a-space>
                  <a-image
                    :fallback="errimage"
                    :src="item.specPic || 'err'"
                    :width="30"
                    class="rounded-sm"
                  />
                  <a-space
                    :class="!item.skuValue ? 'text-gray-400' : ''"
                    class="flex w-60 cursor-pointer items-center justify-between rounded-full border px-3 py-1.5"
                    @click="() => showMoberal(item)"
                  >
                    <a-tooltip :title="item.skuValue">
                      <div class="w-48 truncate">
                        {{ item.skuValue || '请选择货源规格' }}
                      </div>
                    </a-tooltip>
                    <DownOutlined />
                  </a-space>
                </a-space>
                <div>
                  <a-input-number
                    v-model:value="item.buyNum"
                    :max="999"
                    :min="1"
                    placeholder="件"
                    style="width: 100px"
                  />
                </div>
                <a-space>
                  <a-tooltip title="移除规格">
                    <a-button
                      :icon="h(MinusOutlined)"
                      danger
                      shape="circle"
                      type="primary"
                      @click="removeSku(record, index)"
                    />
                  </a-tooltip>
                  <a-tooltip v-if="!index" title="添加规格">
                    <a-button
                      :icon="h(PlusOutlined)"
                      shape="circle"
                      type="primary"
                      @click="addSku(record)"
                    />
                  </a-tooltip>
                </a-space>
              </a-space>
            </div>
          </a-space>
          <!-- <a-space direction="vertical">
            <a-select
              v-for="item in record.bindSkuList"
              :key="item.id"
              v-model:value="item.offerId"
              placeholder="货源"
              style="width: 120px"
            >
              <a-select-option
                v-for="items in bindGoodsList"
                :key="items.offerId"
                :value="items.offerId"
              >
                货源:{{ items.index }}
              </a-select-option>
            </a-select>
          </a-space> -->
        </template>
        <template v-if="column.dataIndex === 'buySku' && false">
          <a-space direction="vertical">
            <a-space v-for="item in record.bindSkuList" :key="item.id">
              <a-space direction="vertical">
                <!-- <div>相似度</div> -->
                <a-progress
                  :format="(percent: number) => `${percent}%`"
                  :percent="Number((item.xiangshidu * 100).toFixed())"
                  :size="40"
                  type="circle"
                />
              </a-space>
              <a-image
                :fallback="errimage"
                :src="item.specPic || 'err'"
                :width="30"
                class="rounded-sm"
              />
              <a-space
                :class="!item.skuValue ? 'text-gray-400' : ''"
                class="flex w-60 cursor-pointer items-center justify-between rounded-full border px-3 py-1.5"
                @click="() => showMoberal(item)"
              >
                <a-tooltip :title="item.skuValue">
                  <div class="w-48 truncate">
                    {{ item.skuValue || '请选择货源规格' }}
                  </div>
                </a-tooltip>
                <DownOutlined />
              </a-space>
            </a-space>
          </a-space>
        </template>

        <template v-if="column.dataIndex === 'buyNum' && false">
          <a-space direction="vertical">
            <template v-for="item in record.bindSkuList" :key="item.id">
              <a-input-number
                v-model:value="item.buyNum"
                :max="999"
                :min="1"
                placeholder="件"
                style="width: 100px"
              />
            </template>
          </a-space>
        </template>
        <template v-if="column.dataIndex === 'addSku' && false">
          <a-space direction="vertical">
            <a-space
              v-for="(_item2, index) in record.bindSkuList"
              :key="_item2.id"
            >
              <a-tooltip title="移除规格">
                <a-button
                  :icon="h(MinusOutlined)"
                  danger
                  shape="circle"
                  type="primary"
                  @click="removeSku(record, index)"
                />
              </a-tooltip>
              <a-tooltip v-if="!index" title="添加规格">
                <a-button
                  :icon="h(PlusOutlined)"
                  shape="circle"
                  type="primary"
                  @click="addSku(record)"
                />
              </a-tooltip>
            </a-space>
          </a-space>
          <!-- <a-button size="small" type="primary">添加规格</a-button> -->
        </template>
      </template>
    </a-table>
  </div>
</template>
